@use 'variable/breakpoint' as *;
.video-bg {
  overflow: hidden;
  min-height: 280px;
  @media #{$gt-md} {
    min-height: 400px;
  }
}

:host ::ng-deep {
  app-video {
    > .video {
      position: static;
    }
  }
  .bg-fill-width.overlay {
    z-index: 2;
  }
  .video-js {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding-top: 0 !important;
    video {
      object-fit: cover;
    }
  }
}

.inner {
  z-index: 10;
  width: 100%;
  height: 100%;
  > .wrapper {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
